<script lang="ts" setup>
import { ref } from 'vue';
import { trainingGetMyMessage } from '/api/provide';

const noticeList = ref([]);

function onJump(item) {
	uni.navigateTo({
		url: `/pages/noticeDetail/index?id=${item.id}`,
		events: {
			setRead: () => {
				item.status = 1;
			}
		}
	})
}
</script>

<template>
	<view class="T_page">
		<load-list :api="trainingGetMyMessage" v-model="noticeList">
			<view class="list">
				<view v-for="item in noticeList" :key="item.id" :class="{ unread: item.status === 0 }" @click="onJump(item)">
					<view class="item">
						<text class="title">{{ item.msgTitle }}</text>
						<text class="time">{{ item.createTime }}</text>
					</view>
					<view class="content">{{ item.msgContent }}</view>
				</view>
			</view>
		</load-list>
	</view>
</template>

<style lang="scss" scoped>
.T_page {
	padding: 20rpx 30rpx;
}

.list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;

	>view {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;

		&.unread {
			>.item>.title {
				font-weight: bold;
				color: #111827;
				display: flex;
				align-items: center;
				gap: 14rpx;

				&::before {
					content: '';
					width: 14rpx;
					height: 14rpx;
					background-color: #3B82F6;
					border-radius: 50%;
				}
			}

			>.content {
				color: #4B5563;
			}
		}

		.item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.title {
				color: #4B5563;
			}

			.time {
				font-size: 22rpx;
				color: #9CA3AF;
			}
		}

		.content {
			line-height: 35rpx;
			font-size: 24rpx;
			color: #9CA3AF;
		}
	}
}
</style>
